import React from 'react';
import { Form, Input, Select, Textarea, Dialog } from 'tdesign-react';
import { JupiterConfig } from '../../../types/configTypes';

const { FormItem } = Form;
const { Option } = Select;

interface Props {
  visible: boolean;
  onClose: () => void;
  onSubmit: (data: Partial<JupiterConfig>) => void;
  initialData?: Partial<JupiterConfig>;
  title: string;
}

export default function ConfigForm({
  visible,
  onClose,
  onSubmit,
  initialData = {},
  title,
}: Props) {
  const [form] = Form.useForm();

  return (
    <Dialog
      header={title}
      visible={visible}
      onClose={onClose}
      onConfirm={() => form.submit()}
      destroyOnClose
      width={600}
    >
      <Form
        form={form}
        initialData={initialData}
        layout="vertical"
        onSubmit={(context) => {
          const { fields } = context as unknown as { fields: Partial<JupiterConfig> };
          onSubmit(fields);
        }}
      >
        {/* <FormItem
          label="配置键"
          name="configKey"
          rules={[{ required: true, message: '请输入配置键' }]}
        >
          <Input placeholder="请输入配置键，如：site.name" />
        </FormItem> */}

        <FormItem
          label="配置名称"
          name="configName"
          rules={[{ required: true, message: '请输入配置名称' }]}
        >
          <Input placeholder="请输入配置名称" />
        </FormItem>

        <FormItem
          label="配置值"
          name="configValue"
          rules={[{ required: true, message: '请输入配置值' }]}
        >
          <Textarea placeholder="请输入配置值" rows={3} />
        </FormItem>

        {/* <FormItem
          label="配置类型"
          name="configType"
          rules={[{ required: true, message: '请选择配置类型' }]}
          initialData={1}
        >
          <Select>
            <Option value={1} label="字符串">
              字符串
            </Option>
            <Option value={2} label="数字">
              数字
            </Option>
            <Option value={3} label="布尔值">
              布尔值
            </Option>
            <Option value={4} label="JSON">
              JSON
            </Option>
          </Select>
        </FormItem> */}

        <FormItem label="状态" name="status" initialData={1}>
          <Select>
            <Option value={1} label="启用">
              启用
            </Option>
            <Option value={0} label="禁用">
              禁用
            </Option>
          </Select>
        </FormItem>

        <FormItem label="描述" name="description">
          <Textarea placeholder="请输入配置描述" rows={3} />
        </FormItem>
      </Form>
    </Dialog>
  );
} 